<template>
  <div class="TableCmp-wrapper">
    <div class="table-search" v-if="showSearch">
      <search-cmp
        v-model="query"
        :form-content="formContent"
        :btn-content="btnContent"
        @search-click="handleSearch"
        @btn-click="handleCommand"
      />
    </div>
    <div class="total-search">
      <slot name="total" />
    </div>
    <div class="tableWapper">
      <el-table
        :data="query.data"
        style="width: 100%"
        border
        fit
        size="mini"
        highlight-current-row
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        v-loading="loading"
        element-loading-text="加载中"
        :span-method="arraySpanMethod"
        :max-height="maxHeight"
      >
        >
        <slot />
      </el-table>
    </div>
    <div v-if="query.pageInfo" class="paginations">
      <el-pagination
        class="pages"
        background
        :current-page.sync="query.pageInfo.page"
        :page-sizes="[10, 20, 30, 40, 50, 100, 200, 400]"
        :page-size="query.pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.pageInfo.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import methods from "./methods";
import SearchCmp from "../SearchCmp";
export default {
  name: "Table",
  components: { SearchCmp },
  props: {
    query: {
      type: [Object],
    },
    formContent: {
      type: [Object, Array],
    },
    btnContent: {
      type: [Object, Array],
    },
    loading: {
      type: Boolean,
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    maxHeight: {
      type: Number,
    },
  },
  data() {
    return {};
  },

  methods,
};
</script>
<style lang="scss" scoped>
.tableWapper {
  margin-top: 10px;
  // min-height: 70vh;
  // .el-table {
  //   min-height: 70vh;
  //   .el-table__body-wrapper {
  //     min-height: 70vh;
  //   }
  // }
}
.paginations {
  margin-top: 20px;
  text-align: left;
}
</style>
